<template>
  <div>
     
   <el-container>
  <el-header >
    <Head></Head>
     <h1 style="color:#cc33cc;font-size:24px;margin-left:80%">我的钱包</h1>
  </el-header>
  <el-container>
    <el-aside width="300px">
<ul>
                 <li style="list-style-type:none;margin-top:20px;">
                   <div style="float:left;border:1px width:100%;">
                   <div style="float:left;border:1px width:40%;">个人余额:{{this.balanceDO.balanceMoney}}</div>
                <div style="float:left;border:1px width:40%;margin-left:20px"> 
                  <el-button type="primary" icon="el-icon-plus" circle @click="dialogVisible=true" size="mini"
></el-button> </div>
   </div> </li><br> <br>
         <li style="list-style-type:none;margin-top:20px;">等级:
           {{ this.balanceDO.balanceUserLevel == 1 ? '普通会员' 
                        : this.balanceDO.balanceUserLevel == 2 ? '白银会员'
                        : '黄金会员'
                         }}
         </li>
     <br> <br> <br> <br> <br> <br> <br> <br> 
             </ul>
             <div style="color:#ff9900">会员说明(累计):</div>
             <ul>
               <li style="list-style-type:none;margin-top:20px;font-weight:bolder;color:#ff3300">充值2000为普通会员，享受0.9折</li>
               <li style="list-style-type:none;margin-top:20px;font-weight:bolder;color:#ff3300">充值5000为白银会员，享受0.85折</li>
               <li style="list-style-type:none;margin-top:20px;font-weight:bolder;color:#ff3300">充值10000为黄金会员，享受0.8折</li>
             </ul>
    </el-aside>
    <el-main>
       
     <template>
    <el-table
      :data="deposit"
      style="width: 95%">
      <el-table-column
        prop="depositSerial"
        label="记录编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="depositMoney"
        label="金额"
        width="100">
      </el-table-column>
      <el-table-column
        prop="depositCreateTime"
        label="消费时间">
      </el-table-column>
      <el-table-column
        label="方式">
        <template slot-scope="scope">
                        {{ scope.row.depositType == 1 ? '充值' 
                        : scope.row.depositType == 2 ?'购物消费'
                        : '预售消费'
                         }}
                    </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
                        {{ scope.row.depositStatus == 1 ? '审核中' 
                        : '已审核'
                         }}
                    </template>
      </el-table-column>
    </el-table>
  </template>
<div class="block" style="width:20%;margin-left:70%">
    <el-pagination
      :current-page="pageInfo.page"
    :total="pageInfo.total"
    :page-size="pageInfo.size"
    @current-change="currentchange"
      layout="prev, pager, next, jumper"
      >
    </el-pagination>
  </div>        

    </el-main>
  </el-container>
</el-container>
<el-dialog
  title="充值"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-row>
  <el-button type="primary" plain @click="addMoney(100)">100</el-button>
  <el-button type="primary" plain @click="addMoney(200)">200</el-button>
  <el-button type="primary" plain @click="addMoney(500)">500</el-button>
</el-row>
  <el-form :model="depositTwoDTO">
    <el-form-item label="充值金额">
      <el-input v-model="depositTwoDTO.depositMoney" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addBalance()">确 定</el-button>
  </div>
</el-dialog>



  </div>
</template>

<script>
import {mapState} from 'vuex'
import {mapActions} from 'vuex'
import Head from "../cart/head"
export default {
  components: {
     Head,
  },
  computed:{
      ...mapState("Balance",["balanceDO"]),
      ...mapState("Deposit",["deposit","pageInfo"]),
       ...mapState("cart", ["user"])
    },
    data() {
      return {
         info:{
            balanceId:1,
            page:1,
            size:5
          },
        dialogVisible: false,
        depositTwoDTO:{
            depositMoney:0,
            depositSerial:"null",
            depositType:1,//不变
            depositStatus:0,//不变
            balanceId:0,//
            userSerial:"",
            balanceSerial:"",

        },
        userId:0,
      };
    },
    async created(){
    //  console.log(this.user);
      this.userId=this.user.userId;
      this.depositTwoDTO.userSerial=this.user.userSerial;
      await this.myBalance(this.userId);//参数没写
      this.depositTwoDTO.balanceSerial=this.balanceDO.balanceSerial;
      this.depositTwoDTO.balanceId=this.balanceDO.balanceId;
      this.info.balanceId=this.balanceDO.balanceId;
       this.select(this.info);

    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      addBalance(){
         this.dialogVisible = false;
        //  console.log(this.depositTwoDTO)
         this.add(this.depositTwoDTO);


      },
      addMoney(num){
            this.depositTwoDTO.depositMoney=num;
      },
       currentchange(current){
       this.select({balanceId:this.info.balanceId,page:current,size:5});
     },
      ...mapActions("Balance",["myBalance"]),
      ...mapActions("Deposit",["add","select"])
      
    },
}
</script>

<style>

</style>